<template>
	<view class="">
		<cu-custom :bgImage="bgImg" :isBack="false">
			<view slot="content">百科</view>
		</cu-custom>
		<view class="flex justify-center align-center search " v-if="false">
			<!-- <view class="flex ml10 white">
				<view class="xxl">芒果</view>
				<u-icon name="arrow-down-fill" color="white" size="20"></u-icon>
			</view> -->
			<view >
				<u-search placeholder="请输入搜索" v-model="keyword" :show-action="false"></u-search>
			</view>
		</view>
		<view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<u-grid :col="2" :border="false">
			<u-grid-item  v-for="item in diseaseList" :key="item._id" @tap="goToDiseasInfo(item)">
				<image :src="item.image" style="width: 300rpx; height: 300rpx;"></image>
				<text>{{item.name}}</text>
			</u-grid-item>
		</u-grid>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImg: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/customBg.jpg',
				keyword: '',
				list: [{
					name: '猫科'
				}, {
					name: '犬科'
				}, {
					name: '其他',
				}],
				current: 0,
				diseaseList: []
			};
		},
		onLoad() {
			this.getDiseaseList()
		},
		methods: {
			change(index) {
				this.current = index;
				this.getDiseaseList()
			},
			async getDiseaseList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'pet', data: { $url: 'getDisease', queryData: {belong: this.current+1} } });
				if (code == 200) {
					this.diseaseList = data
					uni.hideLoading();
				}else {
					this.diseaseList = []
					uni.hideLoading();
				}
			},
			goToDiseasInfo(item) {
				uni.navigateTo({
					url: '/pages_subpackage/diseaseInfo/diseaseInfo?_id=' + item._id
				})
			}
		}
	}
</script>

<style lang="scss">
	.search {
		background-image: url('https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/customBg.jpg');
		height: 100rpx;
	}
</style>